import defaultSettings from "@/settings";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import { store } from "@/store";
import { DeviceEnum } from "@/enums/settings/device.enum";
import { SidebarStatus } from "@/enums/settings/layout.enum";
import { ref, computed, reactive } from "vue";

const SIDEBAR_WIDTH_KEY = "sidebar-width";
const DEFAULT_WIDTH = 200;
const MIN_WIDTH = 24;
const MAX_WIDTH = 320;
const SIDEBAR_WIDTH_EXPANDED = 210;
const SIDEBAR_WIDTH_COLLAPSED = 54;

export const useAppStore = defineStore("app", () => {
  // 设备类型
  const device = useStorage("device", DeviceEnum.DESKTOP);
  // 布局大小
  const size = useStorage("size", defaultSettings.size);
  // 语言
  const language = useStorage("language", defaultSettings.language);
  // 侧边栏状态
  const sidebarStatus = useStorage("sidebarStatus", SidebarStatus.OPENED);
  const sidebar = reactive({
    opened: sidebarStatus.value === SidebarStatus.OPENED,
    withoutAnimation: false,
  });
  // 顶部菜单激活路径
  const activeTopMenuPath = useStorage("activeTopMenuPath", "");

  // 侧边栏宽度
  const sidebarWidth = ref(loadSidebarWidth());

  function loadSidebarWidth(): number {
    const w = localStorage.getItem(SIDEBAR_WIDTH_KEY);
    if (w && !isNaN(Number(w))) {
      return Math.min(Math.max(Number(w), MIN_WIDTH), MAX_WIDTH);
    }
    return sidebar.opened ? SIDEBAR_WIDTH_EXPANDED : SIDEBAR_WIDTH_COLLAPSED;
  }

  function saveSidebarWidth(width: number) {
    sidebarWidth.value = Math.min(Math.max(width, MIN_WIDTH), MAX_WIDTH);
    localStorage.setItem(SIDEBAR_WIDTH_KEY, String(sidebarWidth.value));
  }

  /**
   * 根据语言标识读取对应的语言包
   */
  const locale = computed(() => {
    if (language?.value == "en") {
      return en;
    } else {
      return zhCn;
    }
  });

  // 切换侧边栏
  function toggleSidebar() {
    sidebar.opened = !sidebar.opened;
    sidebarStatus.value = sidebar.opened ? SidebarStatus.OPENED : SidebarStatus.CLOSED;
    // sidebarWidth.value = sidebar.opened ? SIDEBAR_WIDTH_EXPANDED : SIDEBAR_WIDTH_COLLAPSED;
    // saveSidebarWidth(sidebarWidth.value);
  }

  // 关闭侧边栏
  function closeSideBar() {
    sidebar.opened = false;
    sidebarStatus.value = SidebarStatus.CLOSED;
    sidebarWidth.value = SIDEBAR_WIDTH_COLLAPSED;
    // saveSidebarWidth(sidebarWidth.value);
  }

  // 打开侧边栏
  function openSideBar() {
    sidebar.opened = true;
    sidebarStatus.value = SidebarStatus.OPENED;
    sidebarWidth.value = SIDEBAR_WIDTH_EXPANDED;
    // saveSidebarWidth(sidebarWidth.value);
  }

  // 切换设备
  function toggleDevice(val: string) {
    device.value = val;
  }

  /**
   * 改变布局大小
   *
   * @param val 布局大小 default | small | large
   */
  function changeSize(val: string) {
    size.value = val;
  }
  /**
   * 切换语言
   *
   * @param val
   */
  function changeLanguage(val: string) {
    language.value = val;
  }
  /**
   * 混合模式顶部切换
   */
  function activeTopMenu(val: string) {
    activeTopMenuPath.value = val;
  }

  return {
    device,
    sidebar,
    language,
    locale,
    size,
    activeTopMenu,
    toggleDevice,
    changeSize,
    changeLanguage,
    toggleSidebar,
    closeSideBar,
    openSideBar,
    activeTopMenuPath,
    sidebarWidth,
    saveSidebarWidth,
    loadSidebarWidth,
  };
});

export function useAppStoreHook() {
  return useAppStore(store);
}
